<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>放大缩小抖动</title>
<!--<link rel="stylesheet" type="text/css" href="animate.delay.css">-->
<link rel="stylesheet" type="text/css" href="animate/source/bounceIn.css">
<style>
.animate0 {
   	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .8s;
	-moz-animation-delay: 0s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .8s;
	-ms-animation-delay: 0s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .8s;
	animation-delay: 0s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
} 

.test{ display:inline-block;}

button{ background:#03C; border-radius:100px; width:50px; height:50px; line-height:50px; color:#fff; border:none; font-size:40px;
 font-family:Arial, Helvetica, sans-serif}
</style>
</head>

<body>
<button>+</button>
<a class="test"><img src="../demopic/p1.jpg" width="189" height="117"></a>
<a class="test"><img src="../demopic/p1.jpg" width="189" height="117"></a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$('a.test').hover(function(){
			$(this).find('img').addClass('animate0 bounceIn');
		},function(){
			$(this).find('img').removeClass('animate0 bounceIn');
		});

/*$("img").mouseenter(function(){
	$(this).addClass("bounceIn");
}).mouseleave(function(){
	$(this).removeClass("bounceIn");
});*/
</script>
</body>
</html>
